/**
 * PickerField Component Style for tingle
 * @author longyan
 *
 * Copyright 2014-2016, Tingle Team.
 * All rights reserved.
 */

$picker-field-tip-color = $normal-alpha-5
$picker-field-readonly-color = $dark-alpha-2

$picker-field-searchbar-height = 45px

.{$prefix}-picker-field-value
  > *
    vertical-align middle

.{$prefix}-picker-field-icon svg
  fill $picker-field-tip-color

.{$prefix}-picker-field-placeholder
  max-width 100%
  height 24px
  line-height 24px
  color $picker-field-tip-color

.{$prefix}-picker-field-readonly
  color $picker-field-readonly-color

.{$prefix}-picker-field-searchpanel
  position relative
  background-color rgba(0, 0, 0, 0.6)

.{$prefix}-picker-field-searchpanel-inner
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  background-color $basic-100

.{$prefix}-picker-field-searchpanel-search
  height 45px

.{$prefix}-picker-field-searchpanel-content
  position absolute
  top 0
  left 0
  width 100%
  bottom 0

.{$prefix}-picker-field-searchpanel.multiple
  .{$prefix}-picker-field-searchpanel-content
    bottom 60px

.{$prefix}-picker-field-searchpanel-header + .{$prefix}-picker-field-searchpanel-content
  top 45px

.{$prefix}-picker-field-searchpanel-content
  .{$prefix}-scroll-view-inner
    height 100%

.{$prefix}-picker-field-searchpanel-footer
  position absolute
  padding-top 10px
  height 60px

  left 0
  width 100%
  bottom 0
  text-align center
  hairline('border-top', $normal-alpha-7)

  .{$prefix}-picker-field-searchpanel-result-summary
    padding-left 12px
    text-align left
    overflow hidden
    line-height 40px
    font-size 16px

    a
      color $function-blue

  .{$prefix}-button
    float right
    margin-right 12px
    margin-top 4px

.{$prefix}-picker-field-search-empty
  position relative
  height 100%

.{$prefix}-picker-field-search-empty-inner
  position absolute
  left 50%
  top 50%
  transform translate(-50%, -50%)

.{$prefix}-picker-field-search-results
  padding-bottom 18px

.{$prefix}-picker-field-grouping-title
  position -webkit-sticky
  position sticky
  top 0
  background-color #fff
  z-index 1

  .{$prefix}-picker-field-grouping-title-inner
    background-color $normal-alpha-8
    color $normal-alpha-2
    line-height 24px
    font-size 14px
    padding 0 16px

.{$prefix}-picker-field-search-result-item
  position relative
  hairline('border-bottom', $normal-alpha-7)
  padding 18px

  .{$prefix}-icon
    display block
    width 20px
    height 20px

    &.un-checked
      width 18px
      height 18px
      svg
        width 18px
        height 18px
        hairline('border', $brand-primary)
        border-radius 50%
        fill #fff

    svg
      fill $brand-primary
      width 20px
      height 20px

.{$prefix}-picker-field-search-result-item-icon
  display block
  position absolute
  top 50%
  left 18px
  transform translateY(-50%)

  &.{$prefix}-picker-field-right-icon
    left auto
    right 18px

.{$prefix}-picker-field-search-result-item-entry
  display block
  margin-left 34px
  line-height $font-size-t4-lh

  &.{$prefix}-picker-field-right-icon
    margin-left 0
    margin-right 34px

.{$prefix}-picker-field-grouping-bar
  position absolute
  top 50%
  right -10px
  width 38px
  text-align center
  font-size 12px
  line-height 17px
  color $normal-alpha-6
  z-index 2
  -webkit-transform translateY(-50%)
  transform translateY(-50%)

.{$prefix}-picker-field-group
  display none

.{$prefix}-picker-field-avilible-group
  color $normal-alpha-2
  display block

  &.{$prefix}-picker-field-active-group
    color $brand-primary

.{$prefix}-picker-field-grouping-indicator
  position absolute
  width 46px
  height 46px
  left -60px
  top -15px
  line-height 46px
  font-size 24px
  font-weight bold
  text-align center
  background rgb(240, 242, 245)
  color $normal-alpha-6
  border-radius 3px
  box-shadow 0 0 1px $dark-alpha-3

  &.{$prefix}-picker-field-grouping-indicator-hide
    display none

  &.{$prefix}-picker-field-avilible-group
    color $normal-alpha-2

  &::before
    content '.'
    font-size 0
    display block
    position absolute
    width 10px
    height 10px
    transform translate(41px, 18px) rotate(45deg)
    background rgb(240, 242, 245)
    z-index -1
    box-shadow 1px -1px 0 $dark-alpha-6
